<template>
	<view>
		<view class="userImg">
			<image class="samePar" mode="aspectFill" :src="getCloudFilePath(zxsInfo.zjImg)"></image>
			<!-- <view class="botDec posAbso lbzero"></view> -->
		</view>
		<view class="userInfo" style="padding-top: 30rpx;">
			<view class="nameWrap spaceBet"> 
				<view class="alignCen">
					<view class="userName">{{ zxsInfo.userName }}</view>
					<!-- <view class="tag">资深咨询师</view> -->
				</view>
				<view class="loc">{{zxsInfo.prov}}-{{ zxsInfo.city }}</view>
			</view>
			<view class="zxsLevel hasFlex">
				<view class="comItem levelItem"
					v-for="(item,index) in toArrayFuns((zxsInfo.zsName || ''),',')"
					:key="index" 
				>{{item}}</view>
			</view>
			<view class="scLy hasFlex">
				<view class="comItem lyItem noMargR">擅长领域：</view>
				<view class="comItem lyItem"
					v-for="(item,index) in parScName"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			zxsInfo:Object,
			parScName:Array
		},
		computed:{
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userImg{
		height: 750rpx;
		background: linear-gradient(180deg, rgba(190, 218, 227, 1) 0%, rgba(189, 217, 226, 1) 29.17%, rgba(180, 209, 219, 1) 58.17%, rgba(178, 209, 219, 1) 100%);
		.botDec{
			width: 100%;
			height: 100rpx;
			background: linear-gradient(90deg, rgba(200, 229, 255, 1) 0%, rgba(218, 219, 253, 1) 100%);
			border-radius: 20rpx 20rpx 0 0;
			opacity: .6;
		}
	}
	.userInfo{
		padding: 30rpx;
		--hei:38rpx;
		background: #fff;
		margin-top: -100rpx;
		position: relative;
		z-index: 2;
		border-radius: 30rpx 30rpx 0 0;
		.nameWrap{
			align-items: center;
			.userName{
				font-size: 36rpx;
				color: $pss-text-color0;
				font-weight: 600;
			}
			.tag{
				padding: 0 15rpx;
				height: var(--hei);
				line-height: var(--hei);
				background: $pss-color-blue-light;
				color: #fff;
				font-size: 22rpx;
				border-radius: 6rpx;
				margin-left: 30rpx;
			}
			.loc{
				color: $pss-text-color0;
				font-size: 22rpx;
			}
		}
		.zxsLevel{
			margin:20rpx 0 10rpx 0;
			flex-wrap: wrap;
		}
		.scLy{
			flex-wrap: wrap;
		}
		.comItem{
			height: var(--hei);
			line-height: var(--hei);
			color: $pss-text-color0;
			margin-right: 30rpx;
		}
		.levelItem{
			font-size: 26rpx;
		}
		.lyItem{
			font-size: 24rpx;
			&.noMargR{
				margin-right: 0;
			}
		}
	}
</style>